<template>
    <div class="container">
        <div class="row">
            <div class="col-8">
                <Form class="mt-4" :model="user" label-position="top">
                    <FormItem label="用户名">
                        <Input v-model="user.name"></Input>
                    </FormItem>
                    <FormItem label="电子邮件">
                        <Input type='email' v-model="user.email"></Input>
                    </FormItem>
                    <FormItem label="密码">
                        <Input type="password" v-model="user.password"></Input>
                    </FormItem>
                    <FormItem label="角色">
                        <Select
                                v-model="selectedRoles"
                                multiple
                                filterable
                                remote
                                :remote-method="searchRole"
                                :loading="loading">
                            <Option v-for="(option, index) in roles" :value="option.name" :key="index">{{option.name}}</Option>
                        </Select>
                    </FormItem>
                </Form>
            </div>
            <div class="col-4">
                <div class="card">
                    <div class="card-body">
                        <img style="width:180px;height:180px" src=""/>
                        <div>
                            <input class="btn" type="file">选择文件</input>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <Button type="info">保存</Button>
    </div>
</template>

<script>
    export default {
        name: "CategoryDetail",
        mounted() {
            this.getUserDetail()
        },
        methods: {

            getUserDetail() {
                http.get('/api/user').then((data)=> {
                    console.log(data);

                });
            },
            searchRole(key) {

            },
            create() {

            }
        },
        data() {
            return {
                loading: false,
                selectedRoles: {},
                roles: [],
                user: {}
            }
        }
    }
</script>

<style scoped>

</style>
